<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .warn{display: none;color:red}
    
    </style>

</head>

<body>
    <div id="app">
        <fieldset>
            <legend>商品详情</legend>
            <P>
                <label for="id">编号</label>
                <input type="text" name="id" id="id" v-model="prod.id">
            </P>
            <P>
                <label for="name">名称</label>
                <input type="text" name="name" id="name" v-model="prod.name">
                <span vbind:class="warn:!isValid">不能为空</span>
            </P>
            <P>
                <label for="price">价格</label>
                <input type="number" name="price" v-model="prod.price">
            </P>
            <P>
                <input type="button" value="保存" v-on:click="doSave">
            </P>
        </fieldset>
        <input type="text" placeholder="请输入查询关键字" v-model="searchKey">
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in searchProdList">
                    <td> {{item.id}} </td>
                    <td> {{item.name}} </td>
                    <td>&yen; {{item.price | priceFormat}} </td>
                    <td> <button v-on:click="deleteProd" class="btn btn-primary">删除</button> </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                isValid:true,
                searchKey:'',
                prod: { id: 0, name: '', price: 0 },
                prodList: [
                    { id: 1, name: '小米note2', price: 1234 },
                    { id: 2, name: '小米note3', price: 2234 },
                    { id: 3, name: '小米note4', price: 3234 }
                ]
            },
            computed:{
                searchProdList:function(){
                    var self=this;
                    return this.prodList.filter(function(item){
                        return item.name.indexOf(self.searchKey)!=-1;
                    })
                }
            },            
            methods: {
                doSave: function () {
                    this.prodList.push(this.prod);
                    console.log(this.prodList);
                    //清空
                    this.prod = { id: 0, name: '', price: 0 }
                },
                deleteProd:function(item){
                    this.prodList.splice(item.id,1);
                }
            },
            filters: {//定义过滤器显示价格
                priceFormat: function (priceVal) {
                    return  parseInt(priceVal).toFixed(2) + "元";
                }
            }
            

        })    
    </script>
</body>

</html>